<template>
	<div id="userLayout" class="user-layout-wrapper">
		<transition
			name="fade"
			enter-active-class="animated slideIn"
			leave-active-class="animated slideOut"
		>
			<div class="container" v-if="show">
				<router-view />
				<!-- <div class="footer">
					<footer class="page-copyright page-copyright-inverse">
						<p>Nine United</p>
						<p>© 2018. All RIGHT RESERVED.</p>
					</footer>
				</div> -->
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'UserLayout',
	data() {
		return {
			show: false
		};
	},
	mounted() {
		document.body.classList.add('userLayout');
		setTimeout(() => {
			this.show = true;
		}, 200);
	},
	beforeDestroy() {
		document.body.classList.remove('userLayout');
	},
	methods: {
		
	}
};
</script>

<style lang="less" scoped>
.slideIn {
	animation-duration: 0.2s;
	animation-name: slideInDown;
	animation-timing-function: ease-in;
}
.slideOut {
	animation-name: slideOutUp;
	animation-duration: 0.6s;
}
.fadeIn {
	animation-duration: 0.2s;
	animation-name: fadeIn;
	animation-timing-function: ease-in;
}
.fadeOut {
	animation-name: fadeOut;
	animation-duration: 0.6s;
}
.animated {
	animation-fill-mode: both;
}
#userLayout.user-layout-wrapper {
	height: 100%;
	&.mobile {
		.container {
			.main {
				max-width: 368px;
				width: 98%;
			}
		}
	}

	.container {
		width: 100%;
		min-height: 100%;
		padding: 110px 0 0;
		position: relative;
		box-sizing: border-box;

		a {
			text-decoration: none;
		}

		.main {
			min-width: 260px;
			width: 368px;
			margin: 0 auto;
		}

		.footer {
			text-align: center;
			.page-copyright {
				margin-top: 60px;
				font-size: 0.858rem;
				color: #fff;
				letter-spacing: 1px;
			}
		}
	}
}
</style>
